<template>
  <div class="label-config">
    <el-form ref="formRef" :model="form" label-width="0">
      <el-table :data="form.labels" stripe border max-height="450">
        <el-table-column prop="date" label="经销商" min-width="220px">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.dealerCode`" required>
              <select-comp
                url="/admin-api/system/dealer/list-all"
                v-model="row.dealerCode"
                filterable
                :defaultConf="{ label: 'dealerName', value: 'dealerCode' }"
                @onSelect="(ele) => onChangeDealer(ele, row)"
              ></select-comp>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="品种" min-width="220px">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.breedId`" required>
              <select-comp
                url="/admin-api/system/breed/list-all"
                v-model="row.breedId"
                filterable
                :defaultConf="{ label: 'breedName', value: 'breedId' }"
                @onSelect="(ele) => onChangeBreed(ele, row)"
              ></select-comp>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="名称" width="200">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.labelName`" required>
              <el-input
                v-model.trim="row.labelName"
                placeholder="请输入标签条名称"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="积分" align="center">
          <el-table-column prop="custPoints" label="客户" width="120" />
          <el-table-column prop="salemanPoints" label="业务员" width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="countNum" label="数量" width="150" fixed="right">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.countNum`" required>
              <el-input
                v-model.trim="row.countNum"
                placeholder="请输入数量"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="actions"
          label="操作"
          width="80"
          fixed="right"
          v-slot:default="{ $index }"
        >
          <el-button type="danger" size="small" text @click="onDelete($index)">
            删除
          </el-button>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="add-btn-wrap">
      <el-button class="add-btn" type="primary" @click="onAddTableList">
        新增一行
      </el-button>
    </div>

    <div class="dialog-footer">
      <el-button
        type="primary"
        :disabled="form.labels.length === 0"
        @click="submitForm"
      >
        下一步
      </el-button>
      <el-button @click="onColse">关闭</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import store from "@/store/index.js";
// import { ElMessage } from "element-plus";
// import api from "@/api/label.js";
import SelectComp from "@/components/selectComp.vue";

const router = useRouter();
const formRef = ref();
const emits = defineEmits(["next", "error", "close"]);
const globalStore = useStore(); // 该方法用于返回store 实例
const form = ref({
  labels: [
    {
      breedId: "",
      labelName: "",
      dealerName: "",
      dealerCode: "",
      custPoints: "",
      salemanPoints: "",
      countNum: 1,
    },
  ],
});

const onAddTableList = () => {
  form.value.labels.push({
    breedId: "",
    labelName: "",
    dealerName: "",
    dealerCode: "",
    custPoints: "",
    salemanPoints: "",
    countNum: 1,
  });
};

const onChangeDealer = (ele, row) => {
  row.dealerName = ele.dealerName;
};
const onChangeBreed = (ele, row) => {
  row.custPoints = ele.custPoints;
  row.breedName = ele.breedName;
  row.labelName = ele.breedName;
  row.salemanPoints = ele.salemanPoints;
};

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      onCancel();
      emits("next", form.value.labels);
      globalStore.commit("labels/addLabels", form.value.labels);
      // const res = await api.create(form.value);
      // if (res.data) {
      //   ElMessage.success(res.msg || `保存成功！`);
      //   onCancel();
      //   emits("success");
      // } else {
      //   ElMessage.error(res.msg || `保存失败！`);
      //   emits("error");
      // }
    }
  });
};
const onDelete = (index) => {
  form.value.labels.splice(index, 1);
};
const onCancel = () => {
  formRef.value.clearValidate();
  emits("close");
};
function onColse() {
  onCancel();
  router.go(-1);
}
onMounted(() => {
  const arr = store.getters.labels;
  if (arr?.length) {
    form.value.labels = arr;
  }
});
</script>
<style lang="scss" scoped>
.label-config {
  width: 86%;
  margin: 0 auto;
}
.add-btn-wrap {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.add-btn {
  width: 350px;
}
:deep(.el-form-item) {
  margin-bottom: 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
